<template>
  <div>
    <header-login />
    <div class="bgc-white">
      <div class="container-width">
        <logo-bar :advantage="true" :logoBarData="logoBarData" :title = "title" @handSearch="logoBarHandSearch"/>
        <category-bar :collapse="false" />
      </div>
    </div>
    <div class="container-width">
      <supplier-category-siderList @handSearch="categoryHandleSearch"/>
      <div class="flex flex-between">
        <breadcrumb :lastName="lastName" class="pad-t-8"/>
        <div class="flex v-align-c font-12">
          <span>总共找到</span>
          <span class="font-number pad-l-4 pad-r-4">{{ shopListTotal }}</span>
          <span>个店铺</span>
        </div>
      </div>

      <shop-sort-search class="mar-b-20" @handleSearch="shopHandleSearch" :pageIndex="queryParams.currentPage"
          :totalPage="shopListTotal ? Math.ceil(shopListTotal/queryParams.size) : 1"/>
      <div v-loading="customLoading" element-loading-text="加载中" element-loading-background="#f5f5f5"
        class="custom-container">
        <shop-list v-if="shopListTotal > 0" :shopList="shopList" />
        <!-- 空数据展示 -->
        <none-data v-if="shopListTotal <= 0" />
      </div>
      <div class="flex flex-center pad-t-25 pad-b-25" v-if="shopListTotal > 0">
        <el-pagination class="pagination" @current-change="handleCurrentChange" background layout="prev, pager, next, jumper"
        :total="shopListTotal" :page-size="queryParams.size"/>
      </div>
    </div>
    <div class="bgc-white">
      <div class="container-width">
        <footer-links />
      </div>
      <div class="footer-line" />
      <div class="container-width">
        <footer-infos />
      </div>
    </div>
    <right-nav-sticky />
  </div>
</template>

<script lang="ts">
  import {
    defineComponent,
    onMounted,
    ref
  } from 'vue'
  import {
    useRouter
  } from 'vue-router'
  import headerLogin from '@/components/headerLogin/index.vue'
  import logoBar from '@/components/logoBar/index.vue'
  import categoryBar from '@/components/categoryBar/index.vue'
  import footerLinks from '@/components/footerLinks/index.vue'
  import footerInfos from '@/components/footerInfos/index.vue'
  import rightNavSticky from '@/components/rightNavSticky/index.vue'
  import supplierCategorySiderList from '@/components/supplierCategorySiderList/index.vue'
  import breadcrumb from '@/components/breadcrumb/index.vue'
  import shopSortSearch from './components/shopSortSearch/index.vue'
  import shopList from './components/shopList/index.vue'
  import { getShopListPage } from '@/api/shop/shop'
  import noneData from '@/components/noneData/index.vue'

  export default defineComponent({
    name: 'Index',
    components: {
      headerLogin,
      logoBar,
      categoryBar,
      footerLinks,
      footerInfos,
      rightNavSticky,
      supplierCategorySiderList,
      breadcrumb,
      shopSortSearch,
      shopList,
      noneData
    },
    setup() {
      const shopListTotal = ref(0)
      const customLoading = ref(false)
      let lastName = ref('店铺列表')
      const shopList = ref([{
        'id': ''
      }])
      const router = useRouter()
      onMounted(() => {})
      const goNext = () => {
        router.push('/category-list')
      }
      const logoBarData = ref({
        searchTabSwitch: '0'
      })

      const title = router.currentRoute.value.query.title
      let queryParams = ref({
        size: 10,
        currentPage: 1,
        shopName: '',
        categoryId: '',
        conditionColumn: '',
        sort: ''
      })

      onMounted(() => {
        logoBarData.value.searchTabSwitch = '3'
        if (title) {
          queryParams.value.shopName = title
        }
        initDataList()
      })

      const initDataList = () => {
        customLoading.value = true
        getShopListPage(queryParams.value).then(response => {
          customLoading.value = false
          if (response.isError) return
          shopListTotal.value = response.data.total
          shopList.value = response.data.records
        })
      }
      // 搜索框搜索事件
      const logoBarHandSearch = (title:string,tabsIndex:string) => {
        queryParams.value.shopName = title.value
        initDataList()
      }
      // 分类搜索事件
      const categoryHandleSearch = (show:boolean,categoryId:string,categoryName:string) => {
        if (show){
          lastName.value = categoryName
          queryParams.value.categoryId = categoryId
        }else{
          queryParams.value.categoryId = ''
          lastName.value = '店铺列表'
        }
        initDataList()
      }
      // 店铺搜索事件
      const shopHandleSearch = (sort:string,conditionColumn:string) => {
        queryParams.value.sort = sort
        queryParams.value.conditionColumn = conditionColumn
        initDataList()
      }

      const handleCurrentChange = (val:number) => {
        queryParams.value.currentPage = val
        initDataList()
      }

      return {
        goNext,
        logoBarData,
        title,
        shopListTotal,
        lastName,
        shopList,
        handleCurrentChange,
        customLoading,
        queryParams,
        logoBarHandSearch,
        categoryHandleSearch,
        shopHandleSearch
      }
    }
  })
</script>

<style lang="scss" scoped>
  .space-category {
    width: 264px;
  }

  .slider-sign-notice {
    width: 232px;
  }

  .footer-line {
    height: 1px;
    background: #dbdbdb;
    margin: 0 3%;
  }
</style>
